#how to use moment js in laravel | Explore Tumblr posts and blogs

riichardwilson · 5 years ago

Text

Building An E-Commerce Site With October CMS And Shopaholic

About The Author

Leonardo Losoviz is a freelance developer and writer, with an ongoing quest to integrate innovative paradigms (Serverless PHP, server-side components, GraphQL) … More about Leonardo …

The Laravel-powered October CMS enables to extend the functionality of the application through the use of plugins. In this article, we will learn how to create an e-commerce site through one of October’s most popular plugins, Shopaholic.

October CMS is flourishing: With over 9000 stars in its GitHub repo, 2000 forks and 300 contributors, it is becoming a major force in the CMS space. It won the popular vote as the Best Flat-File CMS from 2018, new plugins are published on its marketplace almost daily (covering most of the developer needs), and its network of partners is expanding worldwide. Let’s see what it is all about.

Built in PHP and powered by Laravel (one of the most powerful and developer-friendly PHP frameworks), October CMS is a free open-source Content Management System (CMS). It benefits from Laravel’s clean code and sound architecture to provide a great developer experience, over which it adds simple and flexible CMS functionality to provide a great user experience. This combination makes it possible to launch new projects in a matter of minutes, without having to build the project from scratch. Due to all these features, October can minimize the costs of developing and maintaining websites, making it particularly valuable to businesses and digital agencies.

Yet, in spite of its power, October CMS is very easy to use. Since its inception, October has strived to be “as simple as possible, but not simpler”. For this reason, it is based on one of the simplest stacks for the web: PHP to render HTML, plus CSS and JS assets. In the words of its creators, October’s mission is to prove that “web development is not rocket science”.

In this article, we will do a tour around October CMS: We will first see how to install it, then check some of its coding and usability features in a bit more detail, and finally get our hands dirty implementing an e-commerce website through one of its most popular plugins, Shopaholic.

Recommended YouTube Channel

Are you looking to learn more about e-commerce development? You can do so with the help of live streams that explain the main aspects of the development process based on the Shopaholic platform for October CMS. Watch →

Installing October CMS

Since October CMS runs on PHP, it requires to have a web server running on the computer (if we don’t have one yet, MAMP can provide one for free, allowing to choose between Apache and Nginx, and it works for both Windows and macOS) and a MySQL server to store the database (which can also be provided by MAMP).

The installation through October’s wizard doesn’t take more than a few minutes: We create a new MySQL database, download and unpack the installer files to our target directory for the website (which must be granted writing permission, and which must be set as document root in the web server for the chosen domain, such as localhost), and then invoke the script file from the web browser. From that moment on the wizard takes over, guiding us through the installation process. The wizard will:

Validate if the web server satisfies all the requirements (at least PHP 7.0, and others):

System check (Large preview)

Ask for database and site configuration values, and user credentials:

Configuration (Large preview)

Ask how to set-up the site: From scratch, already installing a specific theme, or using our own existing project (from which our chosen theme and plugins can be automatically installed):

Initial setup (Large preview)

Next, we click on “Install!”, and in a few seconds (depending on our Internet connection speed) the website will be installed and ready to use:

Site installed (Large preview)

In this case, I chose to install it from scratch, under http://localhost. Browsing to this URL on the browser, we can encounter the October starter demo theme:

Browsing the starter demo theme (Large preview)

Navigating to http://localhost/backend (unless we changed this URL during the installation process) we can log into the administration panel:

Browsing the admin panel (Large preview)

Finally, we delete the installer files from the folder. And voilà, in just a few minutes we have a fully functioning site (well, we still need to enhance it with plugins… we will do that in a while).

Alternatively, we can also install October from the command-line interface, by executing:

$ curl -s https://octobercms.com/api/installer | php

This method is faster (it can take as little as 10 seconds to install) because it doesn’t require to input the database configuration. Hence, it is particularly useful for setting-up October CMS as a flat-file system, i.e. a CMS fully set-up through files stored in the local disk, and without a database.

Installing October CMS through the CLI takes no time. (Large preview)

Templating System

October CMS has a robust templating system to implement layouts, re-use chunks of code and enable dynamic functionality. Its most important elements are the following ones:

Pages are the most basic structure for storing content. These are readily available, since they are shipped as part of the core (blog posts, on the other hand, must be installed through a plugin). Pages are based on Twig, which is a modern template engine for PHP (devised by the creators of Symfony), and compiled to plain optimized PHP code, so they execute very fast.

Partials contain reusable chunks of code that can be used all throughout the website, as to avoid duplicating code on the different pages or layouts. They are particularly useful for navigation menus, testimonials, calls to action, and other common elements.

Layouts define the scaffolding, or structure, of the page. They define the <html> and <body> HTML elements, and are useful for creating the frame of the site, including the header, footer and sidebars. The actual content in the body is injected by the page.

Components are the mechanism to extend functionality in October CMS. Any page, partial or layout can have attached any number of components, which are most commonly provided through plugins, and which are fully configurable. In addition to rendering HTML code on the page, components can also provide services, such as form validation, security check-up, control of user permissions, or others.

Configuring a component attached to a page. (Large preview)

These elements are all implemented through files living in the website’s folder in the local hard drive. As such, it is possible to edit them not only through October CMS’ built-in editor, but also from the developer’s preferred text editor (Sublime, VS Code, PHPStorm, etc).

We can edit elements either through the October CMS’ built-in editor or in an external text editor. (Large preview)

Similarly, the October CMS project can be perfectly managed through any version control system, and it can be easily adapted to any existing workflows. For instance, a project can be set-up through continuous integration, deploying it automatically to the server after new code is pushed to the Git repo.

October can be easily managed with Git. (Large preview)

October CMS Marketplace

October CMS has a marketplace for themes (which allow to change the site’s look and feel) and plugins (which allow to extend the site’s functionalities), providing both free and paid offerings. By providing themes which can be used to quickly establish and then configure the design of the site, and plugins each of which implements some required functionality for the site, the marketplace ultimately leads to lower costs for creating our projects and reduced time to launch them.

The marketplace has been getting bigger! Following October’s growing popularity, its marketplace has received a constant stream of new offerings: It currently boasts 915 plugins, comprising most of the functionalities required for our websites (blogging, SEO Company, e-commerce, analytics, email, galleries, maps, security, social, user management, and others), and 150+ themes. Both themes and plugins can be submitted to the marketplace by any independent 3rd party developer, company or agency, and they must adhere to quality guidelines, which ensures that they are performant and secure.

Creating An E-Commerce Site Through Shopaholic

Let’s get our hands dirty and implement a real-life use case: An e-commerce website! For this, we will install Shopaholic, the most popular plugin to add e-commerce functionality to October CMS, and the free theme Bootstrap theme for Shopaholic to quickly bootstrap the site (which will be made to look like this demo site). Shopaholic is ideal for our needs because it provides a comprehensive e-commerce solution, which includes an ecosystem of extensions (both free and paid ones) to further enhance it. In addition, we can install the core experience for free and only make a one-time payment for the extensions that we need, which will be cheaper than using cloud solutions which have a recurring fee to use. And finally, because we are the full owners of our own on-premise e-commerce website, we can customize it as much as we need to and we own all the data, which is not possible with cloud solutions.

Because of the October marketplace dependency management system, we need only install the theme (the Shopaholic plugin is added as a dependency). Let’s proceed to install the theme then: Inside the October CMS admin, we click in the “Front-end theme” section in the Settings, and then click on “Find more themes”:

Front-end theme manager. (Large preview)

Then, we search for theme “Bootstrap theme for Shopaholic” and, upon clicking on the result in the dropdown, it will install the theme and all its dependencies. Once installed, we go back to the Front-end theme manager page and click on the Activate button on the new theme:

Activating the new theme. (Large preview)

After installing the theme and plugins, we will notice a new element “Catalog” on the top menu bar. Clicking on it, we can manage the items in our e-commerce catalog, namely products, categories and brands (these are the core elements; other elements, such as coupons, can be added through extensions). Initially, our catalog will be empty:

Catalog comprising products, categories and brands. (Large preview)

Let’s fill it up with some data. We can either create the items one by one or, quite conveniently, import data through CSV and XML files (which allows us to manage a large set of records with Excel or other tools). In our case, since we are creating a demo site for testing purposes, let’s install plugin Fake Data for Shopaholic which provides large sets of mock data and an easy way to import these records to the system. To do this, follow these steps:

Head to Settings => Updates & Plugins in October CMS backend, and install plugin “Fake Data for Shopaholic”.

Head to Dashboard, and click on Manage widgets and then Add widget.

Select widget “Fake data for Shopaholic”, and click on Add.

In the newly added widget, clicking on Generate under section “Generate fake data ” will run the process to import the fake data.

The last step will ask how many times should the insertion be repeated (as to create bulk and be able to test the performance of the site when loading many records) and which data set (clothes or sneakers):

Generating fake data through Laravel’s artisan command. (Large preview)

After running this process, our catalog will look better stocked:

Catalog with some mock data. (Large preview)

The next step is to create some promotions. To do this, we click on Promotions on the top menu, then on the Create button, and fill the required information. Once each promotion is created, we must edit it again to add products to it. After creating a few of them, our promotion list will look like this:

Creating some promotions. (Large preview)

Now that we have some data, we can finish customizing how our front page will look like. For that, we go to section Settings => Front-end theme => Customize and we complete the information for all tabs (Header, Footer, Social, Main slider, Index page). Once this is ready, our e-commerce site will now be ready:

Our e-commerce site is ready! (Large preview)

Clicking on a product, we can see how its page looks like:

Product page. (Large preview)

Auditing The Speed And Reliability Of The E-Commerce Solution

Because we want to sell our products, speed and a good SEO Company are mandatory, so let’s make an audit using Google Chrome’s Lighthouse on the product page to make sure it runs fast and that it will score high with search engines. Running the audit against the live demo site, it returns the following report:

Lighthouse report of the product page. (Large preview)

Equally important is that the site can withstand heavy load, so that if our product becomes successful and attracts plenty of traffic the server doesn’t crash. For this, we can use the Load Impact tool to run a load test. Running the test using 50 virtual users for 12 minutes against the live demo site (which is hosted on DigitalOcean with a droplet configuration of Standard 2CPU/4 GB RAM) produced the following results:

LoadImpact report of a test load using 50 virtual users during 12 minutes. (Large preview)

As can be seen, the website was able to sustain an acceptable response time throughout the load test, giving us the confidence that we can trust the e-commerce plugin when we need it the most: When it’s time to sell the product.

Finally, we can also feel confident of the reliability of the software, since it is covered by unit tests.

Adding Extensions To Shopaholic

So far so good. However, as it can be seen on the screenshots from our website, there is still no way for the visitor to buy a product. Let’s add this functionality by installing the following free extensions for Shopaholic: Orders, to allow to add products to a cart and make orders, and Omnipay, to process the payment. (For the other Shopaholic extensions, if they are not free and authored by LOVATA, you can use coupon “WELCOME” to get a 50% discount the first time you buy them.) To install these extensions, we head to Settings => Updates & Plugins, search for the plugin names, and click on the results to have them installed.

Searching for ‘Shopaholic’ displays its plugins. (Large preview)

Once installed, we will see a new item Orders in the top navigation, where all orders will be stored, and items Payment methods and Shipping types in the Settings page, to configure the payment gateways (card, cash, etc) and how to deliver the product (by post, etc). We configure these and load again the product page. Now it shows an “Add to cart” button, allowing the user to place an order:

Product page with cart enabled. (Large preview)

After adding several items to the cart, we can proceed to the check-out and complete the order:

Completing the order. (Large preview)

Once the user submits the order, the inventory will be automatically taken care of, updating the number of items for each product in stock, and we will receive an email informing us of the new order (if configured to do so). In section Orders on the admin panel, we can find all the information for the order (products sold, buyer information, method of payment and total, and others), and we can complete the transaction.

All the information from the order is here. (Large preview)

The basic work is done: In barely a few hours we managed to have a fully functional e-commerce sith with October CMS and Shopaholic.

Creating Our Own Extension

If none of the several extensions to Shopaholic on the October marketplace provides the functionality needed, we can also create our own extensions.

To do this, if you are comfortable with Object-Oriented Programming and PHP and, more specifically, with Laravel, then you are ready to do it. The documentation explains how to add an extension, step by step. For instance, following this tutorial, with barely a few lines of code we can add a custom field “rating” to our products:

Adding a custom field to the product. (Large preview)

We can then retrieve the new “rating” field from the product and display it in the product template:

Displaying a custom field in the product page. (Large preview)

Extending Shopaholic is not difficult and enables us to fully implement our own e-commerce requirements, and personalize the site to suit our brand.

Conclusion

October CMS is a great candidate for building powerful sites in a very simple manner (showing that “web development is not rocket science”). It delivers the great developer experience granted by Laravel, and its marketplace (which is growing daily) provides a large number of ready-to-use themes and plugins, allowing us to build websites very quickly. One such plugin is Shopaholic, which converts the site into a full-fledged e-commerce platform.

Because of these reasons, building a site with October can be very cost-effective. As a result, it has gained some reputation (by winning the popular vote as best flat-file CMS from 2018) and has increasingly become a tool of choice for businesses and digital agencies crafting sites for their clients.

To find out more from the October community, be welcome to join the October CMS Slack workspace, which is where the creators of themes and plugins published in the marketplace hang out, so you can conveniently chat with them to get their help and advice.

Give October a try (it’s free!), and let us know how it goes.

(ra, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/building-an-e-commerce-site-with-october-cms-and-shopaholic/ source https://scpie.tumblr.com/post/612281391220162560

0 notes

scpie · 5 years ago

Text

Building An E-Commerce Site With October CMS And Shopaholic

About The Author

Leonardo Losoviz is a freelance developer and writer, with an ongoing quest to integrate innovative paradigms (Serverless PHP, server-side components, GraphQL) … More about Leonardo …

Recommended YouTube Channel

Installing October CMS

Validate if the web server satisfies all the requirements (at least PHP 7.0, and others):

System check (Large preview)

Ask for database and site configuration values, and user credentials:

Configuration (Large preview)

Ask how to set-up the site: From scratch, already installing a specific theme, or using our own existing project (from which our chosen theme and plugins can be automatically installed):

Initial setup (Large preview)

Next, we click on “Install!”, and in a few seconds (depending on our Internet connection speed) the website will be installed and ready to use:

Site installed (Large preview)

In this case, I chose to install it from scratch, under http://localhost. Browsing to this URL on the browser, we can encounter the October starter demo theme:

Browsing the starter demo theme (Large preview)

Navigating to http://localhost/backend (unless we changed this URL during the installation process) we can log into the administration panel:

Browsing the admin panel (Large preview)

Alternatively, we can also install October from the command-line interface, by executing:

$ curl -s https://octobercms.com/api/installer | php

Installing October CMS through the CLI takes no time. (Large preview)

Templating System

October CMS has a robust templating system to implement layouts, re-use chunks of code and enable dynamic functionality. Its most important elements are the following ones:

Configuring a component attached to a page. (Large preview)

We can edit elements either through the October CMS’ built-in editor or in an external text editor. (Large preview)

October can be easily managed with Git. (Large preview)

October CMS Marketplace

Creating An E-Commerce Site Through Shopaholic

Front-end theme manager. (Large preview)

Activating the new theme. (Large preview)

Catalog comprising products, categories and brands. (Large preview)

Head to Settings => Updates & Plugins in October CMS backend, and install plugin “Fake Data for Shopaholic”.

Head to Dashboard, and click on Manage widgets and then Add widget.

Select widget “Fake data for Shopaholic”, and click on Add.

In the newly added widget, clicking on Generate under section “Generate fake data ” will run the process to import the fake data.

Generating fake data through Laravel’s artisan command. (Large preview)

After running this process, our catalog will look better stocked:

Catalog with some mock data. (Large preview)

Creating some promotions. (Large preview)

Our e-commerce site is ready! (Large preview)

Clicking on a product, we can see how its page looks like:

Product page. (Large preview)

Auditing The Speed And Reliability Of The E-Commerce Solution

Lighthouse report of the product page. (Large preview)

LoadImpact report of a test load using 50 virtual users during 12 minutes. (Large preview)

Finally, we can also feel confident of the reliability of the software, since it is covered by unit tests.

Adding Extensions To Shopaholic

Searching for ‘Shopaholic’ displays its plugins. (Large preview)

Product page with cart enabled. (Large preview)

After adding several items to the cart, we can proceed to the check-out and complete the order:

Completing the order. (Large preview)

All the information from the order is here. (Large preview)

The basic work is done: In barely a few hours we managed to have a fully functional e-commerce sith with October CMS and Shopaholic.

Creating Our Own Extension

If none of the several extensions to Shopaholic on the October marketplace provides the functionality needed, we can also create our own extensions.

Adding a custom field to the product. (Large preview)

We can then retrieve the new “rating” field from the product and display it in the product template:

Displaying a custom field in the product page. (Large preview)

Extending Shopaholic is not difficult and enables us to fully implement our own e-commerce requirements, and personalize the site to suit our brand.

Conclusion

Give October a try (it’s free!), and let us know how it goes.

(ra, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/building-an-e-commerce-site-with-october-cms-and-shopaholic/

0 notes

laurelkrugerr · 5 years ago

Text

Building An E-Commerce Site With October CMS And Shopaholic

About The Author

Leonardo Losoviz is a freelance developer and writer, with an ongoing quest to integrate innovative paradigms (Serverless PHP, server-side components, GraphQL) … More about Leonardo …

Recommended YouTube Channel

Installing October CMS

Validate if the web server satisfies all the requirements (at least PHP 7.0, and others):

System check (Large preview)

Ask for database and site configuration values, and user credentials:

Configuration (Large preview)

Ask how to set-up the site: From scratch, already installing a specific theme, or using our own existing project (from which our chosen theme and plugins can be automatically installed):

Initial setup (Large preview)

Next, we click on “Install!”, and in a few seconds (depending on our Internet connection speed) the website will be installed and ready to use:

Site installed (Large preview)

In this case, I chose to install it from scratch, under http://localhost. Browsing to this URL on the browser, we can encounter the October starter demo theme:

Browsing the starter demo theme (Large preview)

Navigating to http://localhost/backend (unless we changed this URL during the installation process) we can log into the administration panel:

Browsing the admin panel (Large preview)

Alternatively, we can also install October from the command-line interface, by executing:

$ curl -s https://octobercms.com/api/installer | php

Installing October CMS through the CLI takes no time. (Large preview)

Templating System

October CMS has a robust templating system to implement layouts, re-use chunks of code and enable dynamic functionality. Its most important elements are the following ones:

Configuring a component attached to a page. (Large preview)

We can edit elements either through the October CMS’ built-in editor or in an external text editor. (Large preview)

October can be easily managed with Git. (Large preview)

October CMS Marketplace

Creating An E-Commerce Site Through Shopaholic

Front-end theme manager. (Large preview)

Activating the new theme. (Large preview)

Catalog comprising products, categories and brands. (Large preview)

Head to Settings => Updates & Plugins in October CMS backend, and install plugin “Fake Data for Shopaholic”.

Head to Dashboard, and click on Manage widgets and then Add widget.

Select widget “Fake data for Shopaholic”, and click on Add.

In the newly added widget, clicking on Generate under section “Generate fake data ” will run the process to import the fake data.

Generating fake data through Laravel’s artisan command. (Large preview)

After running this process, our catalog will look better stocked:

Catalog with some mock data. (Large preview)

Creating some promotions. (Large preview)

Our e-commerce site is ready! (Large preview)

Clicking on a product, we can see how its page looks like:

Product page. (Large preview)

Auditing The Speed And Reliability Of The E-Commerce Solution

Lighthouse report of the product page. (Large preview)

LoadImpact report of a test load using 50 virtual users during 12 minutes. (Large preview)

Finally, we can also feel confident of the reliability of the software, since it is covered by unit tests.

Adding Extensions To Shopaholic

Searching for ‘Shopaholic’ displays its plugins. (Large preview)

Product page with cart enabled. (Large preview)

After adding several items to the cart, we can proceed to the check-out and complete the order:

Completing the order. (Large preview)

All the information from the order is here. (Large preview)

The basic work is done: In barely a few hours we managed to have a fully functional e-commerce sith with October CMS and Shopaholic.

Creating Our Own Extension

If none of the several extensions to Shopaholic on the October marketplace provides the functionality needed, we can also create our own extensions.

Adding a custom field to the product. (Large preview)

We can then retrieve the new “rating” field from the product and display it in the product template:

Displaying a custom field in the product page. (Large preview)

Extending Shopaholic is not difficult and enables us to fully implement our own e-commerce requirements, and personalize the site to suit our brand.

Conclusion

Give October a try (it’s free!), and let us know how it goes.

(ra, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

source http://www.scpie.org/building-an-e-commerce-site-with-october-cms-and-shopaholic/ source https://scpie1.blogspot.com/2020/03/building-e-commerce-site-with-october.html

0 notes

douglassmiith · 5 years ago

Text

Building An E-Commerce Site With October CMS And Shopaholic

About The Author

Leonardo Losoviz is a freelance developer and writer, with an ongoing quest to integrate innovative paradigms (Serverless PHP, server-side components, GraphQL) … More about Leonardo …

Recommended YouTube Channel

Installing October CMS

Validate if the web server satisfies all the requirements (at least PHP 7.0, and others):

System check (Large preview)

Ask for database and site configuration values, and user credentials:

Configuration (Large preview)

Ask how to set-up the site: From scratch, already installing a specific theme, or using our own existing project (from which our chosen theme and plugins can be automatically installed):

Initial setup (Large preview)

Next, we click on “Install!”, and in a few seconds (depending on our Internet connection speed) the website will be installed and ready to use:

Site installed (Large preview)

In this case, I chose to install it from scratch, under http://localhost. Browsing to this URL on the browser, we can encounter the October starter demo theme:

Browsing the starter demo theme (Large preview)

Navigating to http://localhost/backend (unless we changed this URL during the installation process) we can log into the administration panel:

Browsing the admin panel (Large preview)

Alternatively, we can also install October from the command-line interface, by executing:

$ curl -s https://octobercms.com/api/installer | php

Installing October CMS through the CLI takes no time. (Large preview)

Templating System

October CMS has a robust templating system to implement layouts, re-use chunks of code and enable dynamic functionality. Its most important elements are the following ones:

Configuring a component attached to a page. (Large preview)

We can edit elements either through the October CMS’ built-in editor or in an external text editor. (Large preview)

October can be easily managed with Git. (Large preview)

October CMS Marketplace

Creating An E-Commerce Site Through Shopaholic

Front-end theme manager. (Large preview)

Activating the new theme. (Large preview)

Catalog comprising products, categories and brands. (Large preview)

Head to Settings => Updates & Plugins in October CMS backend, and install plugin “Fake Data for Shopaholic”.

Head to Dashboard, and click on Manage widgets and then Add widget.

Select widget “Fake data for Shopaholic”, and click on Add.

In the newly added widget, clicking on Generate under section “Generate fake data ” will run the process to import the fake data.

Generating fake data through Laravel’s artisan command. (Large preview)

After running this process, our catalog will look better stocked:

Catalog with some mock data. (Large preview)

Creating some promotions. (Large preview)

Our e-commerce site is ready! (Large preview)

Clicking on a product, we can see how its page looks like:

Product page. (Large preview)

Auditing The Speed And Reliability Of The E-Commerce Solution

Lighthouse report of the product page. (Large preview)

LoadImpact report of a test load using 50 virtual users during 12 minutes. (Large preview)

Finally, we can also feel confident of the reliability of the software, since it is covered by unit tests.

Adding Extensions To Shopaholic

Searching for ‘Shopaholic’ displays its plugins. (Large preview)

Product page with cart enabled. (Large preview)

After adding several items to the cart, we can proceed to the check-out and complete the order:

Completing the order. (Large preview)

All the information from the order is here. (Large preview)

The basic work is done: In barely a few hours we managed to have a fully functional e-commerce sith with October CMS and Shopaholic.

Creating Our Own Extension

If none of the several extensions to Shopaholic on the October marketplace provides the functionality needed, we can also create our own extensions.

Adding a custom field to the product. (Large preview)

We can then retrieve the new “rating” field from the product and display it in the product template:

Displaying a custom field in the product page. (Large preview)

Extending Shopaholic is not difficult and enables us to fully implement our own e-commerce requirements, and personalize the site to suit our brand.

Conclusion

Give October a try (it’s free!), and let us know how it goes.

(ra, yk, il)

Website Design & SEO Delray Beach by DBL07.co

Delray Beach SEO

Via http://www.scpie.org/building-an-e-commerce-site-with-october-cms-and-shopaholic/

source https://scpie.weebly.com/blog/building-an-e-commerce-site-with-october-cms-and-shopaholic

0 notes

mbaljeetsingh · 8 years ago

Text

Build a Realtime CRUD App with Vue & deepstream

Vue is the JavaScript UI tool that parades itself as progressive because it is approachable so one can get started in just a day. On the other hand, it has every feature to cater for your front-end needs, making it versatile.

Realtime technologies are gradually taking a new shape; realtime servers now serve as an abstraction for handling realtime related tasks. deepstream is an open, free and blazingly fast realtime server that you can install on your machine.

This article demonstrates who we can build realtime apps using deepstream and Vue as our front end tool. The image below is a GIF of what we are up to:

Before we get dirty with codes, let's have a reason to do so.

Why Vue

Vue is so far, in my humble opinion, the simplest UI library out in the wild to get your hands dirty with. It is easy to get started and handles most of the tough concepts that come in mind when considering a UI library. These includes: data binding, server-side rendering, state management.

Vue acts on the complexity of the existing UI library and simplifies those complexities to make our lives less frustrating as software engineers. It also has been backed by one of our favorite backend tool, Laravel -- making integration straightforward. This of course does NOT mean you cannot integrate with any other backend platform.

Why deepstream

deepstream is a standalone server -- faster than most of the our realtime solutions -- that allows you to provision realtime server using persisted state as Data Sync, pub/sub pattern as events or request/response pattern as RPCs.

With these varieties of options, you are assured that deepstream can integrate in whatever nature of app you are building. Including chats, realtime news updates, stock information, CRUD/CMS apps, data visualization, data monitoring, etc.

Setup Vue and deepstream

Installing both Vue and deepstream is quite a straightforward process; few commands on your CLI and you're good to go.

deepstream can be installed on Linux, Windows, and OSX; it can also be installed using Docker and npm. For this article, we will download deepstream for our OS. Unzip the file and run the following command on the unzipped directory to start the server:

./deepstream

vue-cli is a CLI tool that makes scaffolding a Vue project easy and fast. We need to install this CLI tool then we can use the tool to create a new project for our demo app:

npm install -g vue-cli

The CLI tool is installed globally so we can access it from anywhere in our machine. Vue project scaffolds come in different templates, we need something simple and the following command will do just that for us:

vue init webpack my-project

Just CRUD with Vue

Before we attempt a realtime app, let's create a platform for that first. A CRUD (Create, Read Update and Delete) app for managing books will be a good idea.

Creating

The App.vue file in the src folder is our main and only component which is enough for what we are trying to build. Open the file and create a simple form:

<template> <div id="app"> <h1> </h1> <h3>New Book</h3> <form v-on:submit.prevent="onSubmit"> <div> <input name="title" type="text" placeholder="title" v-model="book.title" /> </div> <div> <input name="year" type="text" placeholder="year" v-model="book.year" /> </div> <div> <input name="author" type="text" placeholder="author" v-model="book.author" /> </div> <div> <label for="read">Read?</label> <input type="checkbox" v-model="book.read" id="read" name="read" /> </div> <button v-if="updating">Update</button> <button v-else>Add</button> </form> </div> </template> <script> export default { name: 'app', data () { return { title: 'My Books Manager', updating: false, book: { title: '', year: '', author: '', read: false } } } } </script>

The file App.vue is known as Vue's Single File Component which is a great strategy from structuring Vue apps by allowing each component to be stored in a file while its template, style, and logic live in the file.

We have a basic form with Vue bindings. Each of the form control is bound to a property (using v-model) in the book object returned by Vue's data method. The method also returns a title which we use as the app's header and an updating flag which we use to toggle Add and Update buttons in the form. The toggle is achieved using Vue's v-if...v-else directives.

When the button(s) is clicked, an onSubmit method will be called because that is what the form's submit event binding is bound to. We need to create this method:

export default { name: 'app', data () { return { // . . . updateIndex: 0, books: [], book: { title: '', year: '', author: '', read: false } } }, methods: { onSubmit() { if(this.updating) { this.onUpdate(); return; } this.books.push(this.book); this.book = { title: '', year: '', author: '', read: false } } } }

onSubmit will check if we are updating or not. If we are updating, it would delegate to another method, onUpdate, to handle updating. Otherwise, it would push the new values to the books array.

Reading

The books array can be iterated and its values printed using a table. The iteration is achievable using the v-for Vue directive as show:

<template> <div id="app"> <h1> </h1> <h3>New Book</h3>  <h3>All Books</h3> <table> <tr> <th>Title</th> <th>Year</th> <th>Author</th> <th>Read</th> <td>Update</td> <td>Delete</td> </tr> <tr v-for="(b, index) in books"> <td></td> <td></td> <td></td> <td v-if="b.read">✓</td> <td v-else> </td> <td v-on:click.prevent="onEdit(index)"><a>✎</a></td> <td v-on:click.prevent="onDelete(index)"><a>✗</a></td> </tr> </table> </div> </template>

Something extra to the table's data rows -- two links to handle editing (not updating) and deleting a record. Each of them calls the onEdit and onDelete methods respectively. You can start using the form and see the results appear in the table:

Updating

Updating takes two stages -- selecting the record from the table that we need to update which will make it appear in the form and mutating the array to update the value.

The onEdit handler is responsible for the first stage:

data () { return { updating: false, updateIndex: 0, books: [], book: { title: '', year: '', author: '', read: false } } }, methods: { // . . . onEdit(index) { this.updating = true; this.updateIndex = index; this.book = this.books[index]; }, }

onEdit first raises the updating flag, then sets updateIndex to the index being edited and the replaces the book model with the record found in the index being updated.

updateIndex is used to keep track of what is being updated when onUpdate is called:

onUpdate() { this.updating = false; this.books[this.updateIndex] = this.book; this.book = { title: '', year: '', author: '', read: false } },

onUpdate now resets the updating flag, mutates the array to update the book and then empties the book model.

Deleting

This is the simplest; we utilize the array splice method to remove an item from the array based on there index:

onDelete(index) { // Remove one item starting at // the specified index this.books.splice(index, 1) }

Going Realtime with deepstream

We have just built a working app, but that was not the goal. We need to let all connected clients know when a record is added, updated and deleted by updating the table holding these records. This is where deepstream steps in to help out. At the moment, if we try such, other connected clients stays dumb:

deepstream Clients, Records & Lists

In the beginning of this post, we setup a deepstream server and left it running. In fact, the server is running on localhost at a given port, 6020. This server is just idle hoping for a client to connect and start exchanging data.

A deepstream client can come in any form, ranging from web, desktop, mobile and to even IoT. Our concern is Web for today, so we need to use deepstream's JS SDK to connect to the listening server. You can install the SDK by running:

npm install --save deepstream.io-client-js

Records in deepstream are like records in any other form of representing data. It is a single entity and store a given information item. The only difference is that deepstream records are live which means that data stored on records can be subscribed to by clients and the clients will be notified with payload at the slightest change.

Lists, on the other hand, help group records so they can be treated like a collection. Lists are as well live so they can be subscribed to for realtime changes and updates. We will utilize these deepstream features in our app to make the app realtime.

Authentication

Authentication just like in every other situation allows you to confirm that a user is actually who she claims to be. Your regular HTTP authentication differ a little from the how deepstream will handle authentication. However, the good thing is, it is easy to hook them together.

For every deepstream connecting client, an authentication is required. This does not necessarily mean that a credential must be provided; performing a login can just be anonymous and that applies to our case at the moment.

import * as ds from 'deepstream.io-client-js'; export default { name: 'app', data () { return { ds: ds('localhost:6020'), books$$: null // . . . } }, created () { this.ds.login({}, () => { console.log('logged in'); }); }, methods: {/* . . .*/} }

First we import the installed client, then we create a member variable ds to hold a reference to the deepstream while passing in the server's URL.

The created function is a lifecycle method which is called by Vue when the component is ready. This makes created a good candidate to handle deepstreawm authentication. Authentication is performed by calling deepstream.login method which receives a credential and a callback.

The books$$ property will keep a reference to the deepstream list we are yet to create.

We will revisit the CRUD process and update them with respect to deepstream but before that, we need to make all the connected clients listen to value changes so they can update accordingly

List and Records Subscriptions

created () { this.ds.login({}, () => { console.log('logged in'); }); this.books$$ = this.ds.record.getList('books'); /* * Entry added */ this.books$$.on('entry-added', (recordName, index) => { this.ds.record.getRecord(recordName).whenReady(record => { // The scond paramaeter, // a boolean, is a flag to specify whether // the callback should be invoked immediatly // with the current value record.subscribe(data => { if(!data.id) { if(data.title) { data.id = record.name; this.books.push(data); } } else { this.books = this.books.map(b => { if(data.id == b.id) { b = data; } console.log(b) return b; }); } }, true) }); }); /* * Entry removed */ this.books$$.on('entry-removed', (recordName, index) => { this.ds.record.getRecord(recordName).whenReady(record => { record.subscribe(data => { this.books.splice(this.books.indexOf(data, 1)); }, true) }); }); },

Lists and records API live on the record object. To create or retrieve an existing list, we use the getList method passing in, a name of our choice.

entry-added event listens to record addition to the created list. So when a record is added to the list, the event is triggered.

When a record is added, whenReady ensures the record is ready before we subscribe to it using the subscribe method.

subscribe takes a callback which checks if the data exists and updates it. If the record's data does not exist, it updates the record with the incoming data while setting the data's id to the record name (id). The books array is updated as data comes in.

entry-removed is the opposite of what we saw. It listens for when we remove a record so as to remove the record's data from the books array.

Creating

The onSubmit method will have to take a new shape. We won't be pushing data to books directly because that's already being done by the subscription. We just need to call a method that creates a record with data and adds the record to the list we created:

onSubmit() { const recordName = this.book.id || 'book/' + this.ds.getUid(); this.ds.record.has(recordName, (err, has) => { if(has){ this.onUpdate(); return; } else { const bookRecord = this.ds.record.getRecord(recordName); bookRecord.set(this.book); this.books$$.addEntry(recordName) this.book = { title: '', year: '', author: '', read: false } } }) },

We create/get a record using a UUID or the Id attached to data if data exists. The had method is used to check if the record exists or not. If it exists, we call the onUpdate method, else, we set the record to the new book and update the books$$ list with addEntry.

Updating

onUpdate() { const recordName = this.books[this.updateIndex].id; const bookRecord = this.ds.record.getRecord(recordName); bookRecord.set(this.book); this.book = { title: '', year: '', author: '', read: false } this.updating = false; }

onSubmit delegates updating to the onUpdate if the record name in question exists.

onUpdate retrieves the record name from the books array using the updateIndex. We get the record that the record name belongs to and the update the record with the book changes. No need to do anything on the list, it will behave accordingly.

Deleting

The onDelete method just calls removeEntry from the list to remove a record:

onDelete(index) { this.books$$.removeEntry(this.books[index].id); }

Conclusion

Building realtime apps keeps getting better with advent of more advanced solutions. You can as well perform HTTP auth or JWT auth as well as connect your database to deepstream when you need to persist data.

It's fascinating how we could build better UI apps using two simple to integrate platforms, Vue and deepstream. Vue is not just the only kid welcomed to the party. You can integrate deepstream with any other UI library out there using the same strategy of initialization and authentication.

via Scotch.io http://ift.tt/2lr7SdO

#IFTTT #Feedly

0 notes